<script setup lang="ts">
import type { TagVO } from '#/api/company/tag/model';
import type { PersonalTagVO } from '#/api/company/tag/personal/model';

import { computed, onMounted, ref } from 'vue';

import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';

import { ColorTag } from '#/components/dict';

interface Props {
  labels?: PersonalTagVO[] | TagVO[];
  showCount?: number;
}

const props = withDefaults(defineProps<Props>(), {
  labels: () => [],
  showCount: 8,
});

const expand = ref(false);

const toggleLabels = computed(() => {
  const list = props.labels || [];
  return expand.value ? list : list.slice(0, props.showCount);
});

function toggle() {
  expand.value = !expand.value;
}

onMounted(() => {
  //
});
</script>

<template>
  <div class="flex flex-wrap gap-[4px]">
    <ColorTag
      v-for="item in toggleLabels"
      :key="item.id"
      :color="item.listClass"
      :disabled="item.status === '1'"
      :label="item.name"
    />
    <div v-if="labels?.length > showCount">
      <a-button
        class="flex items-center"
        type="link"
        size="small"
        @click.stop="toggle"
      >
        <template #icon>
          <DownOutlined v-if="!expand" :style="{ fontSize: '12px' }" />
          <UpOutlined v-if="expand" :style="{ fontSize: '12px' }" />
        </template>
        <span class="ms-0" style="margin-inline-start: 0">
          {{ expand ? '收起' : '更多' }}
        </span>
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
